<template>
  <div class="initiate_main">
    <van-nav-bar :title="proDetail.productName" left-arrow @click-left="$router.back()"/>
    <div class="initiate_main_left">
        <div class="info_box">
            <div class="info_title">最高可贷</div>
            <div class="info_content">
                <div class="info_num">{{proDetail.quota}}</div>
            </div>
            <div class="info_lilv">年化利率（单利）低至 <span>{{proDetail.ratio}}</span></div>
            <div class="info_line"></div>
            <div class="info_desc">
                <span class="info_desc_item"><img style="width: 0.8rem;" :src="require(`@/assets/public/business-icon1.png`)" alt=""/>{{proDetail.displayFirFeature}} {{proDetail.displaySecFeature}}</span>
                <span class="info_desc_item"><img style="width: 1.2rem;" :src="require(`@/assets/public/business-icon3.png`)" alt=""/>最长{{proDetail.duration}}</span>
            </div>
        </div>
        <div class="factor_box">
            <div class="pad_card_title">
                <div class="title_left">
                    <div class="title_red"></div>
                    <span>产品介绍</span>
                </div>
            </div>
            <div class="factor_desc" v-html="proDetail.displayOverall"></div>
        </div>
        <div class="condition_box">
            <div class="pad_card_title">
                <div class="title_left">
                    <div class="title_red"></div>
                    <span>申请条件</span>
                </div>
            </div>
            <div class="condition_content">
                <div class="condition_item" v-html="proDetail.displayCondition"></div>
            </div>
        </div>
        <div class="flow_box">
            <div class="pad_card_title">
                <div class="title_left">
                    <div class="title_red"></div>
                    <span>申请流程</span>
                </div>
            </div>
            <div class="flow_content">
                <div class="flow_item">
                    <img class="flow_img" :src="require(`@/assets/`+systemColor+`/business-details1.png`)" alt=""/>
                    <div class="flow_desc">① 线上申请</div>
                </div>
                <img class="flow_arrows" :src="require(`@/assets/`+systemColor+`/pro_arrow.png`)" alt=""/>
                <div class="flow_item">
                    <img class="flow_img" :src="require(`@/assets/`+systemColor+`/business-details2.png`)" alt=""/>
                    <div class="flow_desc">② 银行审批</div>
                </div>
                <img class="flow_arrows" :src="require(`@/assets/`+systemColor+`/pro_arrow.png`)" alt=""/>
                <div class="flow_item">
                    <img class="flow_img" :src="require(`@/assets/`+systemColor+`/business-details3.png`)" alt=""/>
                    <div class="flow_desc">③ 线上/线下签约</div>
                </div>
                <img class="flow_arrows" :src="require(`@/assets/`+systemColor+`/pro_arrow.png`)" alt=""/>
                <div class="flow_item">
                    <img class="flow_img" :src="require(`@/assets/`+systemColor+`/business-details4.png`)" alt=""/>
                    <div class="flow_desc">④ 用款支用</div>
                </div>
            </div>
        </div>
        <div class="hint_box">
            <div class="pad_card_title">
                <div class="title_left">
                    <span style="color: rgb(78, 89, 105);">温馨提示</span>
                </div>
            </div>
            <div class="hint_desc" v-html="proDetail.displayTips"></div>
        </div>
        <div class="bottom_box">
            <div class="bottom_btn" @click="releaseShowClick">立即申请</div>
        </div>
    </div>
    <!-- <product-route-preview v-if="previewModelShow" ref="productRoutePreview" :previewModelShow.sync="previewModelShow" :productKey="proDetail.productKey" :proId="detail.prodId" ></product-route-preview> -->
  </div>
</template>
<script>
// import productRoutePreview from "@/view/loanPage/component/productRoutePreview.vue";
export default {
    name: "productDetail",
    data() {
        return {
            systemColor: '',
            detail:{},//详情
            proDetail:{},//详情
            previewModelShow: false,  //选择路由
        }
    },
    components: { 
        // productRoutePreview 
    },
    mounted() {
    },
	created () {
        this.systemColor = localStorage.getItem("systemColor");
        this.detail = this.$route.query;
        this.detail.prodId = '449117936545955841'
        this.getBusinessDetails();
	},
	computed: {

	},
    methods: {
        // 产品详情
        getBusinessDetails(){
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: '加载中...'
            });
            this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/getPoolProduct', { productId: this.detail.prodId}).then(res => {
                this.$toast.clear();
                if(res.isOk){
                    console.log(this.__ctx)
                    this.proDetail = res.data;  
                    this.proDetail.displayCondition = this.proDetail.displayCondition.replaceAll("\n", "<br>");
                    this.proDetail.displayTips = this.proDetail.displayTips.replaceAll("\n", "<br>");
                    this.proDetail.displayOverall = this.proDetail.displayOverall.replaceAll("\n", "<br>");
                }else{
                    this.$toast({
                        icon: 'warning',
                        message: res.msg
                    });
                }
            }, function (status) {
                this.$toast.clear();
                if (status == !0) {
                    this.$toast({
                        icon: 'warning',
                        message: '加载失败！' + status
                    });
                }
            });
        },
        releaseShowClick(){
            // this.previewModelShow = true;
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: '加载中...'
            });
            let params = {
                prodId: this.detail.prodId,
                channel: process.env.Equipment == "wxBank" ? '4' : '5',//获取流程渠道    web    web端(2)/ ccapp  统一门户(2)/ pad    pad端(6)/ appBank  手机银行(5)/ wxBank   微信银行(4)
            }
            this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/getProdFlow', params).then(res => {
                this.$toast.clear();
                if(res.isOk){
                    if(res.data && res.data.workflowId){
                        let query = {
                            defId: res.data.workflowId,
                            prodId: this.detail.prodId, 
                            bankReferrer: this.$route.query.bankReferrer ? this.$route.query.bankReferrer : '', 
                            networkCode: this.$route.query.networkCode ? this.$route.query.networkCode : ''
                        }
                        this.$router.push({  
                            path: '/bpm/start',
                            query: query
                        })
                    }else{
                        this.$toast({
                            icon: 'warning',
                            message: '未匹配到业务办理流程，请联系管理员！'
                        });
                    }
                }else{
                    this.$toast({
                        icon: 'warning',
                        message: res.msg
                    });
                }
            }, function (status) {
                this.$toast.clear();
                if (status == !0) {
                    this.$toast({
                        icon: 'warning',
                        message: '加载失败！' + status
                    });
                }
            });
            // return;
            // if(this.proDetail.productName == '助农贷'){  //khzzxnd  	客户自主兴农贷  bankReferrer  推荐人编号  networkCode  机构编码
            //     this.$router.push({
            //         path: '/bpm/start',
            //         query: {defId: '437609410852552705'}
            //     })
            // }else if(this.proDetail.productName == '顺农贷'){  //sdpoc_khzzznd 客户自主顺农贷  key:sdpoc_khzzznd id:447189216084361217   bankReferrer  推荐人编号  networkCode  机构编码
            //     let query = {
            //         defId: '447189216084361217',
            //         prodId: this.detail.prodId, 
            //         bankReferrer: this.$route.query.bankReferrer ? this.$route.query.bankReferrer : '', 
            //         networkCode: this.$route.query.networkCode ? this.$route.query.networkCode : ''
            //     }
            //     this.$router.push({  
            //         path: '/bpm/start',
            //         query: query
            //     })
            // }else{  //khzzjsdlc 客户自主经营快贷  bankReferrer  推荐人编号  networkCode  机构编码
            //     this.$router.push({  
            //         path: '/bpm/start',
            //         query: {defId: '439492879462170625'}
            //     })
            // }
        },
        handleChange(e){
			this.show = false;
		},
    }
  }
</script>

<style scoped lang="less">
/deep/.van-nav-bar{
  .van-nav-bar__content{
    height: 4.4rem;
    line-height: 2rem;
    .van-icon{
      color: rgb(50, 50, 51);
      font-size: 2rem;
    }
    .van-nav-bar__title{
      font-size: 1.8rem;
    }
  }
}
[class*=van-hairline]::after{
  border: 0;
}
    .initiate_main_left {
        padding: 1.2rem 1.2rem 0;
        overflow-y: auto;
        height: calc(~'100vh - 5.6rem');

        .info_box{
            // background-image: url('../../../assets/blueSeries/home-Info-bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-shadow: 0px 0px 18px 0px var(--home-border38-color),inset 0px 0px 12px 0px rgba(255, 255, 255, 0.1);
            border-radius: 1.2rem;

            /* 自动布局 */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 2rem 1.6rem 1.8rem;
            margin-bottom: 1.2rem;
            .info_title{
                color: #fff;
                font-family: HarmonyOS Sans SC;
                font-size: 1.6rem;
                font-weight: 700;
                line-height: 2.4rem;
                letter-spacing: 0px;
                text-align: center;
            }
            .info_content{
                display: flex;
                justify-content: center;
                align-items: center;
                .info_num{
                    color: rgb(255, 255, 255);
                    font-family: DIN;
                    font-size: 3.2rem;
                    font-weight: 700;
                    // line-height: -1px;
                    letter-spacing: 0px;
                    text-align: center;
                }
            }
            .info_lilv{
                color: rgb(255, 255, 255);
                font-size: 1.4rem;
                font-weight: 500;
                line-height: 1.9rem;
                // margin-top: 0.8rem;
                span{
                    font-size: 1.6rem;
                    font-weight: 700;
                    line-height: 2.4rem;
                }
            }
            .info_line{
                width: calc(100% - 2rem);
                height: 0;
                border: 1px solid rgba(255, 255, 255, 0.2);
                // flex: none;
                // align-self: stretch;
                // flex-grow: 0;
                margin: 1.6rem 0px;
            }
            .info_desc{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .info_desc_item{
                    width: 60%;
                    color: rgb(255, 255, 255);
                    font-family: HarmonyOS Sans SC;
                    font-size: 1.4rem;
                    font-weight: 400;
                    line-height: 1.6rem;
                    letter-spacing: 0px;
                    text-align: center;
                    img{
                        margin-right: 0.8rem;
                    }
                }
                .info_desc_item:nth-child(2){
                    margin: 0 0.8rem;
                    width: 40%;
                }
            }
        }
        .con_box{
            padding: 1.6rem 2.4rem;
            font-size: 1.4rem!important;
            line-height: 2.2rem;
        }
        .flow_box{
            background: rgb(255, 255, 255);
            border-radius: 1.2rem;
            .flow_title{
                color: rgb(29, 33, 41);
                font-family: HarmonyOS Sans SC;
                font-size: 1.8rem;
                font-weight: 700;
                line-height: 2.4rem;
                letter-spacing: 0px;
                text-align: center;
                margin-bottom: 1.2rem;
            }
            .flow_content{
                width: calc(~'100% - 3.2rem');
                display: flex;
                justify-content: space-between;
                // align-items: center;
                padding: 0 1.6rem 2.4rem;
                .flow_item{
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    .flow_img{
                        width: 3.6rem;
                        height: 3.6rem;
                        margin-bottom: 0.8rem;
                    }   
                    .flow_desc{
                        color: rgb(78, 89, 105);
                        font-family: HarmonyOS Sans SC;
                        font-size: 1.2rem;
                        font-weight: 500;
                        line-height: 1.6rem;
                        letter-spacing: 0px;
                        text-align: center;
                    }
                }
                .flow_arrows{
                    width: 1rem;
                    height: 1.5rem;
                    margin-top: 1.2rem;
                }
            }
        }
        .factor_box{
            border-radius: 1.2rem;
            margin-bottom: 1.6rem;
            background-color: rgb(255, 255, 255);
            .factor_title{
                color: rgb(29, 33, 41);
                font-family: HarmonyOS Sans SC;
                font-size: 1.8rem;
                font-weight: 700;
                line-height: 2.4rem;
                letter-spacing: 0px;
                // text-align: center;
                margin-bottom: 1.2rem;
            }
            .factor_desc{
                color: rgb(134, 144, 156);
                font-family: HarmonyOS Sans SC;
                font-size: 1.4rem;
                font-weight: 400;
                line-height: 2rem;
                letter-spacing: 0px;
                text-align: left;
                padding: 0 1.6rem 2.4rem;
            }
        }
        .condition_box{
            background: rgb(255, 255, 255);
            border-radius: 1.2rem;
            margin-bottom: 1.6rem;
            .condition_title{
                color: rgb(29, 33, 41);
                font-family: HarmonyOS Sans SC;
                font-size: 1.8rem;
                font-weight: 700;
                line-height: 2.4rem;
                letter-spacing: 0px;
                // text-align: center;
                margin-bottom: 1.2rem;
            }
            .condition_content{
                padding: 0 1.6rem 2.4rem;
                .condition_item{
                    color: rgb(134, 144, 156);
                    font-family: HarmonyOS Sans SC;
                    font-size: 1.4rem;
                    font-weight: 400;
                    line-height: 2rem;
                    letter-spacing: 0px;
                    text-align: left;
                }
            }
        }
        .hint_box{
            border-radius: 1.2rem;

            /* 自动布局 */
            // display: flex;
            // flex-direction: column;
            // justify-content: flex-start;
            // align-items: center;
            padding: 0 1.6rem 2.4rem;
            .hint_title{
                color: rgb(29, 33, 41);
                font-family: HarmonyOS Sans SC;
                font-size: 1.8rem;
                font-weight: 700;
                line-height: 2.4rem;
                letter-spacing: 0px;
                // text-align: center;
                margin-bottom: 1.2rem;
            }
            .hint_desc{
                color: rgb(134, 144, 156);
                font-family: HarmonyOS Sans SC;
                font-size: 1.4rem;
                font-weight: 400;
                line-height: 2rem;
                letter-spacing: 0px;
                // text-align: center;
            }
        }
    }
    .bottom_box{
        .bottom_btn{
            height: 4.4rem;
            margin: 1.8rem 0;
            background: linear-gradient(270.00deg, var(--primary-color), var(--gradient2-color));
            border-radius: 4rem;
            color: rgb(255, 255, 255);
            font-family: HarmonyOS Sans SC;
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 4.4rem;
            letter-spacing: 0%;
            text-align: center;
        }
    }

.pad_card_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 0rem;
    font-size: 1.6rem;
    font-weight: 400;
    // height: 0.64rem;

    &.pad_card_title_bottom_border {
        height: 6.4rem;
        border-bottom: 1px solid rgb(242, 242, 242);
        padding: 0 1.6rem;
    }

    .title_left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--text-color);
        font-weight: 700;

        .title_red {
            height: 1.6rem;
            width: 0.6rem;
            border-top-right-radius: 0.6rem;
            border-bottom-right-radius: 0.6rem;
            background-color: var(--primary-color);
            margin-right: 1.6rem;
        }
    }
}
// 橙色系
.orangeSeries .info_box {
  background-image: url('../../assets/orangeSeries/business-details-bg.png');
}
// 蓝色系
.blueSeries .info_box {
  background-image: url('../../assets/blueSeries/business-details-bg.png');
}
</style>
